<template>
    <div>
        <div class="MyNews">
            <div class="menu">
                <nuxt-link
                    v-for="(item, index) in menuList"
                    :key="index"
                    class="menu-item"
                    :class="{ 'menu-item-active': item.router == menuRouter }"
                    :to="'/MyNews/' + item.router"
                >
                    <div class="name">
                        <img
                            :src="
                                item.router == menuRouter
                                    ? item.img_active
                                    : item.img
                            "
                            :alt="item.name"
                        />
                        {{ item.name }}
                        <div v-show="item.num > 0" class="num">
                            {{ item.num }} {{ messageCount.xx_unread }}
                        </div>
                        <div
                            v-show="index == 3 && messageCount.xx_unread > 0"
                            class="num"
                        >
                            {{ messageCount.xx_unread }}
                        </div>
                        <div
                            v-show="index == 4 && messageCount.hd_unread > 0"
                            class="num"
                        >
                            {{ messageCount.hd_unread }}
                        </div>
                        <div
                            v-show="
                                index == 5 && messageCount.huiyuanzhuanxiang > 0
                            "
                            class="num"
                        >
                            {{ messageCount.huiyuanzhuanxiang }}
                        </div>
                    </div>
                    <i class="el-icon-arrow-right"></i>
                </nuxt-link>
            </div>
            <div class="con">
                <div v-show="!isNewsDetail" class="con-title">
                    <span
                        v-for="(item, index) in conTitle"
                        :key="index"
                        :class="{ active: index == tabIndex }"
                        @click="tabClick(index)"
                    >
                        {{ item.label }}
                    </span>
                </div>
                <div v-show="isNewsDetail" class="con-black">
                    <div @click="back">
                        <i class="el-icon-arrow-left"></i>
                        返回
                    </div>
                </div>

                <div v-show="!isNewsDetail" class="list">
                    <template v-if="menuRouter == 'collectask'">
                        <askNewItem
                            v-for="(item, index) in collectAskList"
                            :key="index"
                            :item="item"
                        ></askNewItem>
                    </template>
                    <template v-if="menuRouter == 'like'">
                        <likeItem
                            v-for="(item, index) in likeList"
                            :key="index"
                            :tabIndex="tabIndex"
                            :item="item"
                        ></likeItem>
                        <div v-if="playList.length == 0">
                            <el-empty description="暂无内容"></el-empty>
                        </div>
                    </template>
                    <template v-if="menuRouter == 'system'">
                        <systemItem
                            v-for="(item, index) in systemList"
                            :key="index"
                            :item="item"
                        ></systemItem>
                    </template>
                    <template v-if="menuRouter == 'viponly'">
                        <viponlyItem
                            v-for="(item, index) in viponlyList"
                            :key="index"
                            :item="item"
                        ></viponlyItem>
                    </template>
                    <template v-if="menuRouter == 'notice'">
                        <noticeItem
                            v-for="(item, index) in noticeList"
                            :key="index"
                            :item="item"
                            @click="goInfo(item)"
                        ></noticeItem>
                        <div v-if="noticeList.length == 0">
                            <el-empty description="暂无公告"></el-empty>
                        </div>
                    </template>
                    <template v-if="menuRouter == 'play'">
                        <playItem
                            v-for="(item, index) in playList"
                            :key="index"
                            :item="item"
                            @click="goInfo(item)"
                        ></playItem>
                        <div v-if="playList.length == 0">
                            <el-empty description="暂无活动"></el-empty>
                        </div>
                    </template>

                    <div v-if="total > limit" class="page">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="page"
                            :page-size="limit"
                            :total="total"
                            @current-change="changePage"
                        >
                        </el-pagination>
                    </div>
                </div>

                <div v-if="isNewsDetail" class="news-info">
                    <div class="info-title">
                        {{ newsInfo.title }}
                    </div>
                    <div class="info-time">
                        {{ getTime(newsInfo.createtime * 1000) }}
                    </div>
                    <div
                        class="info-content"
                        v-html="newsInfo.content"
                        @click="imageEnlargement"
                    ></div>
                    <div class="info-view">{{ newsInfo.brows }}阅读</div>
                </div>
            </div>
        </div>

        <el-image
            v-show="false"
            class="my-img"
            ref="myImg"
            src=""
            :preview-src-list="previewList"
        >
        </el-image>
    </div>
</template>

<script>
import huifu from "@/assets/images/myNews/huifu.png";
import huifu_active from "@/assets/images/myNews/huifu_active.png";
import like from "@/assets/images/myNews/like.png";
import like_active from "@/assets/images/myNews/like_active.png";
import tongzhi from "@/assets/images/myNews/tongzhi.png";
import tongzhi_active from "@/assets/images/myNews/tongzhi_active.png";
import notice from "@/assets/images/myNews/notice.png";
import notice_active from "@/assets/images/myNews/notice_active.png";
import play from "@/assets/images/myNews/play.png";
import play_active from "@/assets/images/myNews/play_active.png";
import viponly from "@/assets/images/myNews/viponly.png";
import viponly_active from "@/assets/images/myNews/viponly_active.png";

import askNewItem from "@/components/myNews/askNewItem.vue";
import likeItem from "@/components/myNews/likeItem.vue";
import systemItem from "@/components/myNews/systemItem.vue";
import noticeItem from "@/components/myNews/noticeItem.vue";
import playItem from "@/components/myNews/playItem.vue";
import viponlyItem from "@/components/myNews/viponlyItem.vue";

import { getTime, goTopSmooth } from "@/assets/utils/utils";

import {
    mychatroomtext,
    getmessage,
    getcomment,
    new_getgivelike,
    getMessageList,
    getMessageListInfo,
} from "@/assets/api/userCenterApi";

import { mapState, mapMutations } from "vuex";

export default {
    name: "MyNews",
    layout: "home",
    head() {
        return {
            title: "我的消息-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,我的消息",
                },
            ],
        };
    },
    components: {
        askNewItem,
        likeItem,
        systemItem,
        noticeItem,
        playItem,
        viponlyItem,
    },
    props: {},
    data() {
        return {
            menuRouter: "",
            menuList: [
                {
                    name: "收到回答",
                    num: 0,
                    router: "collectask",
                    img: huifu,
                    img_active: huifu_active,
                    tabs: [{ label: "收到回答", type: 0 }],
                },
                // {
                //     name: "评论和赞",
                //     num: 0,
                //     router: "like",
                //     img: like,
                //     img_active: like_active,
                //     tabs: [
                //         { label: "评论", type: 0 },
                //         { label: "赞", type: 0 },
                //     ],
                // },
                {
                    name: "系统通知",
                    num: 0,
                    router: "system",
                    img: tongzhi,
                    img_active: tongzhi_active,
                    tabs: [{ label: "系统通知", type: 0 }],
                },
                {
                    name: "小竹公告",
                    num: 0,
                    router: "notice",
                    img: notice,
                    img_active: notice_active,
                    tabs: [{ label: "小竹公告", type: 0 }],
                },
                {
                    name: "小竹活动",
                    num: 0,
                    router: "play",
                    img: play,
                    img_active: play_active,
                    tabs: [{ label: "小竹活动", type: 0 }],
                },
                {
                    name: "会员专享",
                    num: 0,
                    router: "viponly",
                    img: viponly,
                    img_active: viponly_active,
                    tabs: [{ label: "会员专享", type: 0 }],
                },
            ],

            loading: false,

            tabIndex: 0,
            page: 1,
            limit: 10,
            total: 0,

            collectAskList: [],
            likeList: [],
            systemList: [],
            viponlyList: [],
            noticeList: [],
            playList: [],

            newsInfo: {},
            isNewsDetail: false,
            getTime: getTime,

            previewList: [""],
        };
    },

    computed: {
        conTitle: function () {
            for (let item of this.menuList) {
                if (item.router == this.menuRouter) return item.tabs;
            }
        },
        ...mapState("common", {
            messageCount: (state) => state.messageCount,
        }),
    },
    watch: {
        // $route(to, from) {
        //     try {
        //         if (window) {
        //             this.menuRouter = to.params.url;
        //             if (this.$route.query.id) {
        //                 this.getInfo();
        //             } else {
        //                 this.page = 1;
        //                 this.getList(0);
        //             }
        //             console.log(to.path)
        //             if(to.path = '/MyNews/notice'){
        //                     console.log(1)
        //             }
        //             else if(to.path = '/MyNews/play'){
        //                     console.log(2)
        //             }
        //         }
        //     } catch (error) {}
        // },
    },
    created() {},
    mounted() {
        this.menuRouter = this.$route.params.url;
        if (this.$route.query.id) {
            this.getInfo();
        } else {
            this.page = 1;
            this.getList(0);
        }
        if (this.$route.path == "/MyNews/notice") {
            this.set_messageCount2({
                xx_unread: 0,
            });
        } else if (this.$route.path == "/MyNews/play") {
            this.set_messageCount2({
                hd_unread: 0,
            });
        }
    },
    methods: {
        ...mapMutations("common", ["set_messageCount2"]),

        async getList(index) {
            this.isNewsDetail = false;
            this.loading = true;
            this.tabIndex = index;
            let res = {};
            let params = {
                page: this.page,
                pagesize: this.limit,
            };
            if (this.menuRouter == "collectask") {
                res = await mychatroomtext(params);
                if (res.code == 1) {
                    this.collectAskList = [];
                    if (res.data.length > 0) this.total = res.data[0].datacount;
                    for (let item of res.data) {
                        if (item.ans_data)
                            item.ans_data.message = JSON.parse(
                                item.ans_data.message
                            );
                        this.collectAskList.push(item);
                    }
                }
            } else if (this.menuRouter == "like") {
                if (this.tabIndex == 0) res = await getcomment(params);
                if (this.tabIndex == 1) {
                    params.type = 8;
                    res = await new_getgivelike(params);
                }

                if (res.code == 1) {
                    this.likeList = res.data;
                }
            } else if (this.menuRouter == "system") {
                params.type = 3;
                res = await getmessage(params);
                if (res.code == 1) {
                    this.systemList = res.data;
                }
            } else if (this.menuRouter == "notice") {
                // this.set_messageCount2({
                //     xx_unread: 0,
                // });
                params.type = 1;
                res = await getMessageList(params);
                if (res.code == 1) {
                    this.noticeList = res.data;
                }
            } else if (this.menuRouter == "play") {
                // this.set_messageCount2({
                //     hd_unread: 0,
                // });
                params.type = 2;
                res = await getMessageList(params);
                if (res.code == 1) {
                    this.playList = res.data;
                }
            } else if (this.menuRouter == "viponly") {
                params.type = 16;
                res = await getmessage(params);
                if (res.code == 1) {
                    this.viponlyList = res.data;
                }
            }
            goTopSmooth();
            if (res.data.length > 0) {
                this.total = res.data[0].datacount;
            } else {
                this.total = 0;
            }

            this.loading = false;
        },

        goInfo(item) {
            if (this.menuRouter == "notice") {
                this.set_messageCount2({
                    xx_unread: 0,
                });
            }
            if (this.menuRouter == "play") {
                this.set_messageCount2({
                    hd_unread: 0,
                });
            }
            this.$router.push({
                path: `/mynews/${this.menuRouter}?id=${item.id}`,
            });
        },

        async getInfo() {
            const res = await getMessageListInfo({
                id: this.$route.query.id,
            });
            if (res.code == 1) {
                this.newsInfo = res.data;
                this.isNewsDetail = true;
            }
        },

        tabClick(index) {
            this.page = 1;
            this.getList(index);
        },

        changePage(page) {
            this.page = page;
            this.getList(this.tabIndex);
        },
        // 点击富文本
        imageEnlargement(e) {
            if (e.target.nodeName == "IMG") {
                //判断点击富文本内容为img图片
                this.previewList = [e.target.currentSrc];
                this.$refs.myImg.showViewer = true;
            }
        },

        back() {
            switch (this.menuRouter) {
                case "notice":
                    this.$router.push({
                        path: "/MyNews/notice",
                    });
                    break;
                case "play":
                    this.$router.push({
                        path: "/MyNews/play",
                    });
                    break;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.MyNews {
    margin: 37px auto;
    background: #ffffff;
    border-radius: 10px;
    width: 1200px;
    display: flex;
}

.menu {
    padding: 13px 0 155px;
    min-width: 240px;
    border-right: 1px solid #ededed;
    .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 66px;
        padding: 0 23px 0 45px;
        cursor: pointer;
        user-select: none;
        .name {
            font-size: 16px;
            color: #333333;
            position: relative;
            display: flex;
            align-items: center;
            .num {
                padding: 0 5px;
                font-size: 12px;
                color: #ffffff;
                background: #fa5151;
                border-radius: 50px;
                text-align: center;
                position: absolute;
                top: -1px;
                right: -20px;
            }
            img {
                width: 24px;
                height: 24px;
                padding-right: 6px;
            }
        }
        i {
            font-size: 28px;
            color: #333333;
            display: none;
        }
        &:hover {
            opacity: 0.9;
        }
    }

    .menu-item-active {
        background: #f3f9ff;
        .name {
            color: #1c87f3;
        }
        i {
            color: #1c87f3;
            display: block;
        }
    }
}

.con {
    width: 100%;
    .con-title {
        height: 59px;
        border-bottom: 1px solid #ebebeb;
        line-height: 59px;
        font-size: 18px;
        color: #333333;
        width: 100%;
        padding-left: 25px;
        span {
            padding: 0 15px;
            cursor: pointer;
            user-select: none;
        }
        .active {
            color: #1c87f3;
        }
    }

    .con-black {
        height: 59px;
        border-bottom: 1px solid #ebebeb;
        line-height: 59px;
        font-size: 18px;
        color: #333333;
        width: 100%;
        padding-left: 25px;
        div {
            cursor: pointer;
            font-size: 18px;
            color: #333333;
            &:hover {
                color: #1c87f3;
            }
        }
    }
}

.page {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.news-info {
    padding: 0 97px;
    .info-title {
        padding-top: 46px;
        font-size: 22px;
        font-weight: 500;
        color: #333333;
        text-align: center;
    }
    .info-time {
        padding-top: 30px;
        font-size: 14px;
        color: #999999;
        text-align: center;
    }
    .info-content {
        padding-top: 60px;
        color: #333333;
        &::v-deep img {
            max-width: 80%;
            margin-left: 10%;
        }
    }
    .info-view {
        padding: 70px 0;
        font-size: 14px;
        color: #999999;
    }
}
</style>
